
<template>
	<div class="risk-content">
		<eagle-page-list
			:controller="controller"
			:queryParams="queryParams"
			@bindData="bindData"
			:conditions="conditions"
			ref="eaglePageList"
		>
			<template #list>
				<div class="plan-list">
					<div
						class="plan-detail mb-10"
						v-for="(item, index) in list"
						:key="index"
						@click="_goDetail(item)"
					>
						<div class="plan-detail-hd mb-10">
							<img
								src="@/assets/Images/AppIcon/icon_studyplan_icon.png"
								alt=""
							/>
							<div class="mt-5">
								<div class="plan-detail-title mb-10">{{ item.PlanName }}</div>
								<div class="plan-detail-describe">
									{{ item.Introduce || '暂无描述' }}
								</div>
							</div>
						</div>
						<div>类型：{{ item.TrainTypeName }}</div>
						<div>
							<div class="mb-5" style="text-align: right">
								{{ item.CurrentProgress }}%
							</div>
							<eagle-progress
								:show-pivot="false"
								:percentage="item.CurrentProgress"
							/>
						</div>
						<div class="plan-detail-bd mt-10">
							<div>发起人：{{ item.PublishChnName }}</div>
							<span v-if="item.PlanFinishTime"
								>培训时间：{{ item.PlanStartTime|formatDateTime }}至{{
									item.PlanFinishTime|formatDateTime
								}}</span
							>
							<span v-else-if="item.JoinTime"
								>加入时间：{{ item.JoinTime|formatDateTime }}</span
							>
						</div>
						<eagle-tag type="primary" v-if="item.PlanFinishTime && item.IsOverdue == 10" class="plan-detail-tag"
							>进行中</eagle-tag
						>
						<eagle-tag
							v-else-if="item.PlanFinishTime &&item.IsOverdue == 20"
							type="success"
							class="plan-detail-tag"
							>已完成</eagle-tag
						>
						<eagle-tag v-else-if="item.PlanFinishTime" type="warning" class="plan-detail-tag"
							>已过期</eagle-tag
						>
					</div>
				</div>
			</template>
		</eagle-page-list>
	</div>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			conditions: {},
			controller: "/TrainPlan",
			queryParams: {
				dataType: "MyStudy",
			},
			CurrentProgress: 60,
		}
	},
	created() {
		//this.getList()
	},
	methods: {
		bindData(data) {
			this.list = [];
			if (data) {
				this.list = data;
			}
		},
		// 详情
		_goDetail(item) {
			this.$router.push('/Train/TrainingplanDetail?id='+item.ID)
		},
	},
}
</script>

<style lang="less" scoped>
.risk-content {
	background-color: #e8f1f8;
	min-height: 100vh;
	.info_search {
		padding: 10px;
		border-radius: 5px !important;
		.van-field__control {
			background-color: #ffffff !important;
		}
	}
}

.plan-detail {
	width: 100%;
	background-color: #fff;
	border-radius: 8px;
	padding: 10px;
	color: #333;
	font-size: 10px;
	position: relative;
	.plan-detail-tag {
		position: absolute;
		top: 0;
		right: 0;
		border-radius: 0 5px 0 5px;
	}
}

.plan-detail-hd {
	display: flex;
	img {
		width: 50px;
		height: 50px;
		margin-right: 10px;
	}
	.plan-detail-title {
		font-size: 14px;
		color: #000;
	}
	span {
		color: #666;
	}
}
.plan-detail-describe {
	line-height: 1.2;
	// word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
	-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
	-webkit-line-clamp: 2; /** 显示的行数 **/
	overflow: hidden; /** 隐藏超出的内容 **/
	word-break: break-all;
}
.plan-detail-bd {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
</style>